<template>
	<view>
		<view class="p-50 p-t-30 left" v-if="createStatus===1">
			<text class="ts-40 tb wa left">
				<text class="tc-green">君能</text>e站
			</text>
			<br>
			<text class="ts-24 wa left m-t-5">
				<text class="tc-gray">司机你好，请先创建车辆</text>
			</text>
			<view class="form-item1" style="margin-top: 55rpx;">
				<!-- <input class="form-input1" type="text" v-model="accountInfo.brand" :maxlength="5" placeholder="填写车辆品牌"/> -->
				<view class="form-input1" style="line-height: 99rpx;">
					<picker mode="selector" :range="brandList" @change="onMultiMinChange" style="background-color: white;">
						<view class="picker" v-if="accountInfo.brand">
							{{ accountInfo.brand }}
						</view>
						<view class="picker" style="color: #8a8686;" v-else>
							请选择车辆品牌
						</view>
					</picker>
				</view>
				<!-- <view class="form-count1">
					<span class="full-count1">{{ accountInfo.brand.length }}/</span>5
				</view> -->
			</view>
			<view class="form-item1">
				<input class="form-input1" type="text" v-model="accountInfo.model" :maxlength="10" placeholder="填写车辆型号"/>
				<view class="form-count1">
					<span class="full-count1">{{ accountInfo.model.length }}/</span>10
				</view>
			</view>
			<view class="form-item1">
				<input class="form-input1" type="text" v-model="accountInfo.vehicle_layout" :maxlength="10" placeholder="填写车辆牌照"/>
				<view class="form-count1">
					<span class="full-count1">{{ accountInfo.vehicle_layout.length }}/</span>10
				</view>
			</view>
			<view class="form-item1">
				<input class="form-input1" type="text" v-model="accountInfo.driving_license_number" :maxlength="20" placeholder="填写行驶证号"/>
				<view class="form-count1">
					<span class="full-count1">{{ accountInfo.driving_license_number.length }}/</span>20
				</view>
			</view>
			<view class="form-select1">
				<text class="tc-gray form-text1">选择车辆类型</text>
				<view class="form-select-item1 ts-26" :class="active1===key ? 'active1' : ''" v-for="(value, key) in carsType" :key="key" @click="selectCarType(key)">{{value}}</view>
			</view>
			<view class="form-submit1" @click="submit()">
				完成创建
			</view>
		</view>
		<view class="p-50 p-t-30 left" v-if="createStatus===2">
			<view class="left title">
				<text class="ts-40 tb wa left">
					<text class="tc-green">{{info.brand}}</text>
				</text>
				<br>
				<text class="ts-24 wa left m-t-5">
					<text class="tc-gray">{{info.model}} | {{info.vehicle_layout}}</text>
				</text>
				<image class="title-icon" src="/static/img/add.png" style="right: 0rpx; border-radius: 0;" @click="addCar()"></image>
				<image class="title-icon" src="/static/img/jian.png" style="border-radius: 0;" @click="carList()"></image>
				<image class="title-icon" src="/static/img/del.png" style="right: 140rpx; border-radius: 0;" @click="delCar()"></image>
			</view>
			
			<view class="form-item tc" style="margin-top: 55rpx;">
				<image :src="`https://junext.co/assets/addons/xylease/imgs/${info.vehicle_type}.png`"></image>
			</view>
			<view v-if="!info.battery_id" class="form-band">
				<text class="tc-green tb ts-38 col-1 left m-b-10">绑定电池</text>
				<text class="tc-gray ts-26 col-1 left">如何添加绑定君能锂电池</text>
				<image class="form-band-icon" src="/static/img/band.png"  @click="bandind()"></image>
			</view>
			<view v-if="info.battery_id" class="form-band w650" style="border: 0; padding: 0; margin: 0rpx; overflow: hidden; position: relative;">
				<view class="form-band form-band-3" @click="lastDian()" style="width: 148rpx;">
					<image class="form-band-icon1" src="/static/img/dian.png"></image>
					<text class="tc-green tb ts-36 col-1 left m-b-10 tr">{{info.battery.rsoc}}</text>
					<text class="tc-gray ts-26 col-1 left tr">剩余电量</text>
				</view>
				<view class="form-band form-band-3" @click="lastDian()" style="position: absolute; left: 50%; transform: translateX(-50%);">
					<image class="form-band-icon1" src="/static/img/wendu.png"></image>
					<text class="tc-green tb ts-36 col-1 left m-b-10 tr">{{info.battery.maxNtc}}</text>
					<text class="tc-gray ts-26 col-1 left tr">电池加热</text>
				</view>
				<view class="form-band form-band-3" style="text-align: center; background: #f9f9f9; float: right;" @click="qiangzhi()">
					<image class="form-band-icon3" src="/static/img/kai.png"></image>
					<text class="tc-gray ts-26 col-1 left">强制启动</text>
				</view>
			</view>
			<view v-if="info.battery_id" class="form-map" @click="mapShow(2)">
				<image class="map" src="/static/img/map.png"></image>
				<view class="map-b"></view>
				<view class="car-location">
					<image class="map map-location left" src="/static/img/weizhi.svg"></image>
					<text class="ts-32 left" style="color: #f9f9f9;">车辆具体位置</text>
				</view>
				
			</view>
			<view v-if="info.battery_id" class="form-band w650" style="border: 0; padding: 0; margin: 0rpx;">
				<view class="form-band form-band-2 flex ali-cen just-sb" @click="getLog(1)">
					<image class="form-band-icon2" src="/static/img/action.png"></image>
					<text class="tc-gray ts-26 left">强制启动记录</text>
				</view>
				<view class="form-band form-band-2 flex ali-cen just-sb" @click="getLog(2)" style="float: right;">
					<image class="form-band-icon2" src="/static/img/hot.png"></image>
					<text class="tc-gray ts-26 left">预约加热记录</text>
				</view>
			</view>
			<view class="form-map" @click="mapShow(1)" style="margin-bottom: 200rpx;">
				<image class="map" src="/static/img/map.png"></image>
				<view class="map-b"></view>
				<text class="ts-32 col-1 left psa" style="bottom: 30rpx; left: 40rpx; color: #f9f9f9;">君能售后服务站点</text>
			</view>
			
		</view>
		<xy-tabbar />
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import xyTabbar from '@/components/xy-tabbar';
	export default {
		components: {
			xyTabbar
		},
		data() {
			return {
				css:{},
				createStatus: 3,
				submitDisabled:false,
				latitude: 39.909,
				longitude: 116.39742,
				active: "",
				info:{
					battery: [],
					battery_id: '', // 电池id
					brand: "福田",
					id: '',
					model: "风景G9",
					vehicle_layout: "闽DH222J",
					vehicle_type: "truck"
				},

				// 添加
				carsType: {},
				brandList: [],
				active1: "",
				type: '',
				accountInfo:{
					brand:'',
					model:'',
					vehicle_layout:'',
					driving_license_number:'',
					vehicle_type:''
				},
			}
		},
		onLoad(options) {
			this.$xyfun.setNavBar(' ');
			this.active = options.id || ''
			if (!this.active) this.carNumber()
		},
		onShow() {
			if (this.active) { 
				this.getDianDetail()
			} else {
				this.carNumber()
			}
			this.getBrandList() // 获取品牌列表
			this.getCarList() // 获取列表
		},
		onPullDownRefresh() {
			this.getDianDetail()
		},
		computed: {
			...mapState(['user'])
		},
		methods: {
			getCarList() {
				this.$api.get({
					url: '/car/car/getVehicleTypeList',
					success: res => {
						this.carsType = res
						this.active1 = Object.keys(this.carsType)[0]
					}
				});
			},
			selectCarType(key) {
				this.active1 = key
			},
			onMultiMinChange(e) {
				this.accountInfo.brand = this.brandList[e.detail.value]
			},
			getBrandList() {
				this.brandList = []
				this.$api.get({
					url: '/car/car/getBrandList',
					success: res => {
						if (res && res.length > 0) {
							res.forEach(item => {
								this.brandList.push(item.name)
							})
						}
					}
				});
			},
			submit() {
				if (this.user.isLogin) {
					this.accountInfo.vehicle_type = this.active1
					this.$api.post({
						url: '/car/car/add',
						loadingTip:'加载中...',
						data: this.accountInfo,
						success: res => {
							this.$xyfun.msg('添加成功');
							this.carNumber()
							
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '当前页面需要进行登录，确认是否登录',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/user/login'
								})
							}
						}
					})
				}
			},
			carNumber() {
				// 判断是否登录状态
				if (this.user.isLogin) {
					this.$api.get({
						url: '/car/car/getCarlist',
						loadingTip:'加载中...',
						data: {},
						success: res => {
							console.log('/car/car/getCarlist', res)
							if (res.length > 0) {
								// 默认选中第一个车辆
								this.$store.dispatch('common/switchCar', res[0].id)
								this.active = res[0].id
								this.getDianDetail()
							} else {
								this.createStatus = 1
							}
						}
					});
				} else {
					this.createStatus = 1
				}
			},
			// 获取电池详情
			getDianDetail() {
				if (this.user.isLogin) {
					this.$nextTick(() => {
						this.$api.get({
							url: '/car/car/detail',
							loadingTip:'加载中...',
							data: {
								id: this.active
							},
							success: res => {
								this.info = res
								this.createStatus = 2
								uni.stopPullDownRefresh()
								// console.log('获取电池列表', this.common.car_id)
							}
						});
					});
				} else {
					this.createStatus = 1
				}
			},
			bandind() {
				// this.$xyfun.to('/pages/electric/band');
				uni.navigateTo({
					url: '/pages/electric/band?car_id='+this.active
				})
			},
			getLog(type) {
			    uni.navigateTo({
					url: `/pages/electric/list?type=${type}&imei=${this.info.battery.imei}`
				})
			},
			delCar() {
				uni.showModal({
					title: '删除车辆',
					content: '请确认是否删除车辆？',
					success: res => {
						if (res.confirm) {
							this.$api.get({
								url: '/car/car/del',
								data: {
									id: this.active
								},
								success: res => {
									// 刷新当前页面	
									this.createStatus = 3
									this.carNumber()
								}
							})
						}
					}
				})
			},
			qiangzhi() {
				uni.showModal({
					title: '强制启动',
					content: '请确认是否强制启动车辆？',
					success: res => {
						if (res.confirm) {
							if (Number(this.info.battery.avgVoltage_val) > 3.05) {
								this.$xyfun.msg('需要电池电压低，才可以强制启动的，')
								return
							}
							this.$api.post({
								url: '/battery/battery/openBattery',
								data: {
									imei: this.info.battery.imei
								},
								success: res => {
									// 刷新当前页面	
									this.getDianDetail()
								}
							})
						}
					}
				})
				
			},
			lastDian() {
				uni.navigateTo({
					url: `/pages/electric/detail?id=${this.info.battery_id}&car_id=${this.active}`
				})
			},
			carList() {
				this.$xyfun.to('/pages/electric/switch');
			},
			addCar() {
				this.$xyfun.to('/pages/electric/add');
			},
			mapShow(type) {
				if (type === 1) {
					uni.navigateTo({
						url: `/pages/electric/map?type=${type}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/electric/map?type=${type}&imei=${this.info.battery.imei}&lat=${this.info.battery.lat}&lng=${this.info.battery.lng}&name=${this.info.battery.name}`
					})
				}
				
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.title {
		width: 650rpx;
		position: relative;
		.title-icon {
			position: absolute;
			width: 45rpx;
			height: 45rpx; 
			border-radius: 50rpx;
			top: 15rpx;
			right: 70rpx;
		}
	}
	.form-item {
		width: 650rpx;
		position: relative;
		margin-top: 35rpx;
		float: left;
		.form-input {
			width: 622rpx;
			height: 100rpx;
			border-radius: 10rpx;
			background-color: rgba(255,255,255,1);
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			padding-left: 26rpx;
		}
		.placeholder-color {
			color: rgba(135,135,135,0.48);
		}
		.form-count {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			color: rgba(102,102,102,0.32);
			font-size: 24rpx;
			.full-count {
				font-size: 34rpx;
			}
		}
	}
	.form-band {
		width: 568rpx;
		margin-top: 35rpx;
		padding: 40rpx;
		border-radius: 15rpx;
		background-color: white;
		border: 1rpx solid rgba(111, 111, 111, 0.31);
		position: relative;
		float: left;
		.form-band-icon {
			position: absolute;
			top: 52rpx;
			right: 50rpx;
			width: 65rpx; 
			height: 65rpx; 
			border-radius: 65rpx;
		}
	}
	.form-map {
		float: left;
		margin-top: 35rpx;
		border-radius: 15rpx;
		overflow: hidden;
		position: relative;
		.map {
			width: 650rpx; 
			height: 300rpx;
		}
		.map-b {
			width: 650rpx;
			height: 300rpx;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #2b282852;
		}
		.car-location{
			position: absolute; 
			bottom: 16px; 
			left: 22px; 
			width: 500rpx; 
			display: flex; 
			align-items: center;
		}
		.map-location {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}
	.form-band-2 {
		padding: 25rpx 44rpx;
		width: 222rpx;
		height: 69rpx;
		.form-band-icon2 {
			width: 50rpx;
			height: 50rpx; 
			border-radius: 65rpx;
			float: left;
		}
	}
	.form-band-3 {
		padding: 25rpx 25rpx;
		width: 146rpx;
		height: 95rpx;
		.form-band-icon1 {
			position: absolute;
			width: 50rpx;
			height: 50rpx; 
			border-radius: 0rpx;
			top: 45rpx;
			left: 14rpx;
		}
		.form-band-icon3 {
			width: 50rpx; 
			height: 50rpx; 
			border-radius: 65rpx;
			margin-bottom: 8rpx;
		}
	}
</style>
<style scoped lang="scss">
	.form-submit1 {
		margin: 35rpx 0 50rpx;
		width: 649rpx;
    	height: 100rpx;
		border-radius: 15rpx;
		background-color: rgba(0,86,80,1);
		text-align: center;
		color: white;
		line-height: 95rpx;
		float: left;
	}
	.form-item1 {
		width: 100%;
		position: relative;
		margin-top: 35rpx;
		float: left;
		.form-input1 {
			width: 622rpx;
			height: 100rpx;
			border-radius: 15rpx;
			background-color: rgba(255,255,255,1);
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			padding-left: 26rpx;
		}
		.picker {
			padding: 0px;
			background-color: white;
			// color: rgba(102, 102, 102, 0.87);
		}
		.form-count1 {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			color: rgba(102,102,102,0.32);
			font-size: 24rpx;
			.full-count1 {
				font-size: 34rpx;
			}
		}
	}
	.form-select1 {
		width: 627rpx;
		margin-top: 35rpx;
		padding: 20rpx 10rpx;
		border-radius: 15rpx;
		background-color: white;
		border: 1rpx solid rgba(111, 111, 111, 0.31);
		float: left;
		.form-text1 {
			width: 580rpx;
			float: left; 
			padding: 10rpx 20rpx 18rpx;
		}
		.form-select-item1 {
			width: 165rpx;
			height: 90rpx;
			border-radius: 15rpx;
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			float: left;
			margin: 15rpx 40rpx 15rpx 0;
			text-align: center;
			line-height: 85rpx;
			color: rgba(135,135,135,0.48);
			background-color: rgba(187,187,187,0.09);
		}
		.form-select-item1:nth-child(3n+2) {
			margin-left: 21rpx;
		}
		.form-select-item1:nth-child(3n+4) {
			margin-right: 0rpx;
		}
		.active1 {
			border: 1rpx solid rgba(0,86,80,0.72);
			color: rgba(0,86,80,0.72);
			background-color: white;
		}
	}
</style>